<template>
  <div class="admin-layout">
    <!-- 侧边栏 -->
    <div class="sidebar">
      <div class="logo">
        <h2>后台管理系统</h2>
      </div>
      <nav class="nav-menu">
        <router-link to="/admin" class="nav-item" active-class="active">
          <i class="icon">📊</i>
          <span>仪表板</span>
        </router-link>
        <router-link to="/admin/users" class="nav-item" active-class="active">
          <i class="icon">👥</i>
          <span>用户管理</span>
        </router-link>
        <router-link to="/admin/articles" class="nav-item" active-class="active">
          <i class="icon">📝</i>
          <span>文章管理</span>
        </router-link>
        <router-link to="/admin/categories" class="nav-item" active-class="active">
          <i class="icon">📂</i>
          <span>分类管理</span>
        </router-link>
        <router-link to="/admin/tags" class="nav-item" active-class="active">
          <i class="icon">🏷️</i>
          <span>标签管理</span>
        </router-link>
        <router-link to="/admin/comments" class="nav-item" active-class="active">
          <i class="icon">💬</i>
          <span>评论管理</span>
        </router-link>
        <router-link to="/admin/collections" class="nav-item" active-class="active">
          <i class="icon">⭐</i>
          <span>收藏管理</span>
        </router-link>
        <router-link to="/admin/follows" class="nav-item" active-class="active">
          <i class="icon">🤝</i>
          <span>关注管理</span>
        </router-link>
        <router-link to="/admin/likes" class="nav-item" active-class="active">
          <i class="icon">👍</i>
          <span>点赞管理</span>
        </router-link>
        <router-link to="/admin/user-stats" class="nav-item" active-class="active">
          <i class="icon">📈</i>
          <span>用户统计</span>
        </router-link>
      </nav>
      <div class="logout-section">
        <button @click="handleLogout" class="logout-btn">
          <i class="icon">🚪</i>
          <span>退出登录</span>
        </button>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <header class="header">
        <div class="header-title">
          <h1>{{ currentPageTitle }}</h1>
        </div>
        <div class="user-info">
          <span>管理员: {{ userInfo.nickname }}</span>
        </div>
      </header>
      <div class="content">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import { useUserStore } from '../../../stores/user.js'
import { useRouter } from 'vue-router'

export default {
  name: 'AdminLayout',
  setup() {
    const userStore = useUserStore()
    const router = useRouter()
    
    const handleLogout = () => {
      userStore.logout()
      router.push('/admin/login')
    }
    
    return {
      userInfo: userStore.userInfo,
      handleLogout
    }
  },
  computed: {
    currentPageTitle() {
      const routeMap = {
        'admin-dashboard': '仪表板',
        'admin-users': '用户管理',
        'admin-articles': '文章管理',
        'admin-categories': '分类管理',
        'admin-tags': '标签管理',
        'admin-comments': '评论管理',
        'admin-collections': '收藏管理',
        'admin-follows': '关注管理',
        'admin-likes': '点赞管理',
        'admin-user-stats': '用户统计'
      }
      return routeMap[this.$route.name] || '后台管理'
    }
  }
}
</script>

<style scoped>
.admin-layout {
  display: flex;
  height: 100vh;
  background-color: #f5f5f5;
}

.sidebar {
  width: 250px;
  background-color: #2c3e50;
  color: white;
  display: flex;
  flex-direction: column;
}

.logo {
  padding: 20px;
  border-bottom: 1px solid #34495e;
}

.logo h2 {
  margin: 0;
  text-align: center;
}

.nav-menu {
  flex: 1;
  padding: 20px 0;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  color: #ecf0f1;
  text-decoration: none;
  transition: background-color 0.3s;
}

.nav-item:hover,
.nav-item.active {
  background-color: #34495e;
}

.nav-item .icon {
  margin-right: 10px;
  font-size: 18px;
}

.logout-section {
  padding: 20px;
  border-top: 1px solid #34495e;
}

.logout-btn {
  width: 100%;
  background: none;
  border: none;
  color: #ecf0f1;
  padding: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 16px;
  transition: background-color 0.3s;
}

.logout-btn:hover {
  background-color: #34495e;
}

.logout-btn .icon {
  margin-right: 10px;
  font-size: 18px;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.header {
  background-color: white;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title h1 {
  margin: 0;
  color: #2c3e50;
}

.user-info {
  color: #7f8c8d;
}

.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}
</style>